<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta charset="utf-8">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
		<!--离线应用的另一个技巧-->
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<!--指定的iphone中safari顶端的状态条的样式-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<!--告诉设备忽略将页面中的数字识别为电话号码-->
		<meta content="telephone=no" name="format-detection" />
		
		<link rel="stylesheet" type="text/css" href="css/frozen.css"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
	</head>
	<body>
	
		<header class="ui-header ui-header-stable ui-border-b">
		    <i class="ui-icon-return" onclick="history.back()"></i>
		    <h1>商品详情</h1>
		    <button class="ui-btn">首页</button>
		</header>
		
		<footer class="ui-footer ui-footer-stable ui-border-t ui-btn-group ui-floating-btn">
		    <!--<div class="ui-floating-btn">
				<div class="ui-btn-wrap">
				    <button class="ui-btn ui-btn-primary ui-icon">&#xf620;</button>
				    <button class="ui-btn ui-btn-danger">加入购物车</button>
				</div>
			</div>-->
			<button class="ui-btn-lg "><i class="ui-icon">&#xf620;<span class="ui-badge-cornernum">0</span></i></button>
		    <button class="ui-btn-lg ui-btn-danger">加入购物车</button>
		</footer>
		
		<section class="ui-container">
			
			<div class="ui-searchbar-wrap ui-border-b">
			    <div class="ui-searchbar ui-border-radius">
			        <i class="ui-icon-search"></i>
			        <div class="ui-searchbar-text">搜索商品</div>
			        <div class="ui-searchbar-input"><input value="" type="text" placeholder="搜索商品" autocapitalize="off"></div>
			        <i class="ui-icon-close"></i>
			    </div>
			    <button class="ui-searchbar-cancel">取消</button>
			</div>
			
		    <div class="ui-row-flex ui-border-tb tc ui-pxui-tab">
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>测量方法</span>
			    	</a>
			    </div>
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>品牌</span>
			    	</a>
			    </div>
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>包装清单</span>
			    	</a>
			    </div>
			    <div class="ui-col ui-border-r">
			    	<a href="#" class="ui-tiled ui-flex-pack-center">
			    		<span>售后须知</span>
			    	</a>
			   	</div>
			</div>
			
			<div class="ui-whitespace ui-goods-title ui-tiled">
			    <h4>手工透气真皮 头层牛皮套脚 男商务正装皮鞋2103</h4>
			    <a class="collect selected tc" href="#">
				    <i class="ui-icon">&#xf62f;</i>
				    <span>收藏</span>
			    </a>
			</div>
			<div class="ui-slider ui-goods-slider">
			    <ul class="ui-slider-content">
			        <li class="current"><img src="http://placeholder.qiniudn.com/400x400"/></li>
			        <li><img src="http://placeholder.qiniudn.com/400x400"/></li>
			        <li><img src="http://placeholder.qiniudn.com/400x400"/></li>
			    </ul>
			</div>
			
			<ul class="ui-list ui-list-text ui-list-link ui-border-tb ui-detail-arrowlink">
			    <li class="ui-border-t">
			        <h5 class="ui-nowrap">点击查看图文详情？</h5>
			    </li>
			</ul>
			
			<ul class="ui-goodinfo ui-whitespace">
				<li class="price ui-tiled">
					<p>价格：</p>
					<b>￥800</b>
					<del>￥1500</del>
				</li>
				<li class="freight ui-tiled">
					<p>运费：</p>
					<span>免运费</span>
				</li>
				<li class="service ui-tiled">
					<p>服务：</p>
					<span>由科而士提供售后服务</span>
				</li>
				<li class="color">
					<p>颜色：</p>
					<ul class="color-lsit">
						<li class="selected"><img src="http://placeholder.qiniudn.com/40x40"/ width="40" height="40"></li>
						<li><img src="http://placeholder.qiniudn.com/40x40"/ width="40" height="40"></li>
						<li><img src="http://placeholder.qiniudn.com/40x40"/ width="40" height="40"></li>
						<li><img src="http://placeholder.qiniudn.com/40x40"/ width="40" height="40"></li>
					</ul>
				</li>
				<li class="size">
					<p>尺寸：</p>
					<ul class="size-lsit">
						<li class="selected"><b>37</b></li>
						<li><b>38</b></li>
						<li><b>39</b></li>
						<li><b>40</b></li>
						<li><b>41</b></li>
					</ul>
				</li>
			</ul>
			
			<ul class="ui-list ui-list-text ui-list-link ui-border-tb ui-detail-arrowlink">
			    <li class="ui-border-t">
			        <h5 class="ui-nowrap">不知道尺寸？</h5>
			        <div class="ui-txt-info">尺码助手</div>
			    </li>
			</ul>
			
			<div class="ui-form ui-user-measure show">
		        <div class="ui-form-item ui-form-item-l ui-border-b">
		            <label class="ui-border-r">脚长</label>
		            <input type="text" placeholder="您的脚长">
		        </div>
		        <div class="ui-form-item ui-form-item-l ui-border-b">
		            <label class="ui-border-r">脚宽</label>
		            <input type="text" placeholder="您的脚宽">
		        </div>
		        <div class="ui-form-item ui-form-item-l ui-border-b">
		            <label class="ui-border-r">脚厚</label>
		            <input type="text" placeholder="您的脚厚">
		        </div>
		        <div class="ui-btn-wrap ui-btn-group">
				    <button class="ui-btn ui-btn">测量方法</button>
				    <button class="ui-btn ui-btn-primary">确定</button>
				</div>
			</div>
			
			<ul class="ui-list ui-list-text ui-list-link ui-border-tb ui-detail-arrowlink ui-goods-attribute-title">
			    <li class="ui-border-t">
			        <h5 class="ui-nowrap">商品属性</h5>
			        <div class="ui-txt-info">查看属性</div>
			    </li>
			</ul>
			
			<ul class="ui-row ui-goods-attribute ui-whitespace show">
			    <li>
			        <p>货号：2103</p>
			    </li>
			    <li>
			        <p>品牌：科而士</p>
			    </li>
			    <li>
			        <p>款式：帆船鞋</p>
			    </li>
			    <li>
			        <p>颜色：黑色</p>
			    </li>
			    <li>
			        <p>鞋面：头层牛皮（除牛反绒）</p>
			    </li>
			    <li>
			        <p>里皮：头层猪皮</p>
			    </li>
			    <li>
			        <p>鞋底：橡胶</p>
			    </li>
			    <li>
			        <p>闭合方式：套脚</p>
			    </li>
			    <li>
			        <p>根底款式：真皮</p>
			    </li>
			    <li>
			        <p>鞋头款式：正常</p>
			    </li>
			    <li>
			        <p>上架时间：2011年	</p>
			    </li>
			    <li>
			        <p>上市年份：2011年</p>
			    </li>
			</ul>
			
			<ul class="ui-list ui-list-text ui-border-tb ui-detail-arrowlink ui-goods-attribute-title">
			    <li class="ui-border-t">
			        <h5 class="ui-nowrap">商品详情</h5>
			    </li>
			</ul>
			
			<div class="ui-goods-info">
				<img src="http://placeholder.qiniudn.com/640x260"/>
				<img src="http://placeholder.qiniudn.com/640x260"/>
				<img src="http://placeholder.qiniudn.com/640x260"/>
				<img src="http://placeholder.qiniudn.com/640x260"/>
				<img src="http://placeholder.qiniudn.com/640x260"/>
			</div>
			
		    <div class="ui-copyright">
		    	<ul class="ui-tiled declare">
		    		<li>诚信商家</li>
		    		<li>15天无理由免邮退换货</li>
		    	</ul>
		    	<p class="info tc">© 2014-2016 kaieers All Rights Reserved</p>
		    </div>
			
			<!--s Choose size-->
			<div class="ui-size-survey-wrap">
				<div class="ui-size-survey">
					<div class="ui-info ui-border-b">
						<img src="http://placeholder.qiniudn.com/100x100"/>
						<div class="ui-goods-txt">
							<h4 class="ui-txt-red">￥290.00</h4>
							<p class="ui-txt-info"><small>库存59件</small></p>
						</div>
						<i class="ui-icon">&#xf60b;</i>
					</div>
					<div class="ui-survey-info ui-whitespace">
						<div class="ui-form ui-user-measure show">
					        <div class="ui-form-item ui-form-item-l ui-border-b">
					            <label class="ui-border-r">脚长</label>
					            <input type="text" placeholder="您的脚长">
					        </div>
					        <div class="ui-form-item ui-form-item-l ui-border-b">
					            <label class="ui-border-r">脚宽</label>
					            <input type="text" placeholder="您的脚宽">
					        </div>
					        <div class="ui-form-item ui-form-item-l ui-border-b">
					            <label class="ui-border-r">脚厚</label>
					            <input type="text" placeholder="您的脚厚">
					        </div>
					        <div class="ui-btn-wrap ui-btn-group ui-flex-pack-end">
							    <a href="#" class="ui-btn">测量方法</a>
							</div>
						</div>
					</div>
					<div class="ui-arrowlink ui-border-tb"><small>我已知道尺寸</small></div>
					<ul class="ui-size-list ui-whitespace">
						<li><a href="#" class="selected">37</a></li>
						<li><a href="#">38</a></li>
						<li><a href="#">39</a></li>
						<li><a href="#">40</a></li>
						<li><a href="#">41</a></li>
						<li><a href="#">42</a></li>
						<li><a href="#">43</a></li>
						<li><a href="#">44</a></li>
					</ul>
					<a href="#" class="ui-btn ui-btn-danger ui-choose-size-btn">确定</a>
				</div>
			</div><!--s Choose size-->
			
		</section>
		
		<script src="js/lib/zeptojs/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/frozen.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function(){
				
			    var slider = new fz.Scroll('.ui-slider', {
			        role: 'slider',
			        indicator: true,
			        autoplay: true,
			        interval: 3000
			    });
			
			})();
		    $('.ui-searchbar').tap(function(){
		        $('.ui-searchbar-wrap').addClass('focus');
		        $('.ui-searchbar-input input').focus();
		    });
		    $('.ui-searchbar-cancel').tap(function(){
		        $('.ui-searchbar-wrap').removeClass('focus');
		    });
		</script>
	</body>
</html>
